<template>
    <div class="show-order">
        <div class="header">
            <router-link to="/my-income" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">实名认证</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="panel">
            <div class="panel-title">温馨提示</div>
            <div class="panel-desc">即日起对账户进行实名认证，未认证用户将无法提现。</div>
        </div>
        <div class="h30"></div>
        <div class="list">
            <form @submit.prevent="formSubmit">
                <div class="list-title">结算人信息</div>
                <div class="list-item">
                    <div class="list-item-title">姓名<span class="warning">*</span></div>
                    <div class="list-item-input"><input name="name1"  v-model="name1" placeholder="请输入真实姓名"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">微信号</div>
                    <div class="list-item-input"><input name="wechat"  v-model="wechat"  placeholder="请输入微信号"/></div>
                </div>
                <div  class="list-item">
                    <div class="list-item-title">手机号<span class="warning">*</span></div>
                    <div  class="list-item-input">
                        <TelCode :phoneCode="phoneCode" v-on:phoneCodeFn="phoneCodeFn" ></TelCode>
                        <input name="phone" class='list-item-input-phone'    v-model.trim="phone" placeholder="请输入订单联系号码"  maxlength="30"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">收款类型<span class="warning">*</span></div>
                    <div class="list-item-input">
                        <input name="channel_name" @click="channelSelect" class="list-item-input-flex"  v-model="channel_name" readonly placeholder="请选择"/>
                        <img class="list-item-input-arr"  @click="channelSelect"  src="../assets/city-list-arr.png" />
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">账号信息<span class="warning">*</span>
                    </div>
                    <div class="list-item-input"><input name="account"  v-model="account" placeholder="请输入收款账号"/></div>
                </div>
                <div class="list-item">
                    <div class="list-item-title">备注</div>
                    <div class="list-item-input">
                        <textarea name="message" class="list-item-textarea"   v-model="message"
                                  placeholder="其他账号请提供收款人姓名，如银行账号请提供开户行详细信息及持卡人姓名。"/>
                    </div>
                </div>
                <div class="incomeSubmit">
                    <input type="submit" class="incomeSubmit-btn" name="提交" />
                </div>
            </form>
        </div>
        <div class="h30"></div>
        <!--转账渠道-->
        <div class="channel"   v-if="channelDiv" @touchmove.prevent>
            <div class="channel-flex">
                <div class="channel-main" ref="channelDom" >
                    <li class="channel-main-list-item" @click="channelChange(item.asid,item.name)" v-for="item in channelArr" >
                        <label> <input type="radio" :value="item.name" v-model="channel_name">{{item.name}}</label>
                    </li>
                </div>
            </div>
        </div>

        <div class="h30"></div>
    </div>
</template>

<script>
    import { Toast,MessageBox  } from 'mint-ui';
    import config from '../store/config';
    import wxShare from "../store/wxShare"
    import TelCode from '../components/TelCode';
    export default {
        name: "My-income-auth",
        components:{
            TelCode
        },
        data() {
            return {
                url:config.url,
                real_id:'',
                name1: '',
                wechat: '',
                phone:'',
                phoneCode:'电话区号',
                channelDiv:false,
                channel_top:0,
                channel_name:'',
                channel_id:'',
                channelArr:[],
                account :'',
                message: '',
                clientHeight:0,
            }
        },
        methods: {
            phoneCodeFn(val){
                this.phoneCode=val;
            },
            formSubmit: function () {
                var _that = this;
                if (!_that.name1) {
                    Toast({message:'请输入真实姓名', duration: 1000});
                    return false;
                }

                var phoneCode = _that.phoneCode;
                var regPhoneCode = new RegExp("^[0\+][0-9]{1,5}$");
                if (!phoneCode) {
                    Toast({message:'请输入电话号码国家代码', duration: 1000});
                    return false;
                } else if (!regPhoneCode.test(phoneCode)){
                    Toast({message:'请设置电话区号', duration: 1000});
                    return false;
                }



                var phone = _that.phone;
                //var regMobile = new RegExp("^(1)[0-9]{10}$");
                if (!phone || phone.length < 3) {
                    Toast({message:'请输入正确手机号码', duration: 1000});
                    return false;
                }


                if (!_that.channel_id) {
                    Toast({message:'请选择收款类型', duration: 1000});
                    return false;
                }

                if (!_that.account) {
                    Toast({message:'请输入收款账号', duration: 1000});
                    return false;
                }

                var params = {
                    real_id:_that.real_id,
                    name: _that.name1,
                    wechat: _that.wechat,
                    phone: _that.phoneCode + _that.phone,
                    channel_id: _that.channel_id,
                    account: _that.account,
                    message: _that.message
                }
                var path='realname'
                if(_that.real_id){
                    path='realedit'
                }
                _that.axios.post(path, params)
                    .then(res => {
                        Toast({message:'实名认证信息提交成功', duration: 1500});
                        setTimeout(()=>{
                          this.$router.push('./my-income')
                        },1500)
                    })
                    .catch(err => console.log(err));
            },
            getChannel(){
                this.axios.post('channel', {})
                    .then(res => {
                        this.channelArr=res.data;
                    })
                    .catch(err => console.log(err));
            },
            // 选择转账渠道
            channelSelect(){
                var _that=this;
                _that.channelDiv=true
                // setTimeout(()=>{
                //     _that.channel_top=(_that.clientHeight - parseInt(window.getComputedStyle(_that.$refs.channelDom).height)) / 2;
                // },10)
            },
            channelChange(val,name) {
                this.channelDiv=false;
                this.channel_id=val;
                this.channel_name=name;
            },
            getData(){
                this.axios.post('realedit',{real_id:this.real_id})
                    .then(res => {
                        this.real_id=res.data.real_id
                        this.name1=res.data.name
                        this.wechat=res.data.wechat
                        this.phone=res.data.phone
                        this.account=res.data.account
                        this.message=res.data.message
                        setTimeout(()=>{
                            var arr=this.channelArr.filter(item=>{
                                return item.asid==res.data.channel_id
                            })
                            this.channel_name=arr[0].name;
                        },1000)
                        //channel_name
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({ title: '我的收益--实名认证', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            this.getChannel();
            if(this.$route.query.real_id){
                this.real_id=this.$route.query.real_id;
                this.getData()
            }
            this.clientHeight=document.documentElement.clientHeight

            this.share()
        }
    }
</script>

<style lang="scss" scoped>

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }

    .show-order{
        background: $bgcolor1;
        height: 100%;
    }

    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }

    }

   .panel{
       padding: rpx(20) rpx(30);
       background: #fdf9dd;
       &-title{
           padding: rpx(10) 0;
           font-size: rpx(26);
           text-align: center;
       }
       &-desc{
           font-size: rpx(26);
           text-align: center;
       }
   }

    //项列表
    .list {
        &-title {
            font-size: rpx(36);
            padding: rpx(30);
        }
        &-item {
            display: flex;
            align-items: center;
            padding:rpx(35) rpx(30);
            background: $color0;
            border-bottom: solid 1px $color2;

            &-title {
                width: rpx(200);
                font-size: rpx(30);
            }
            &-input {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: rpx(30);
                input{
                    font-size: rpx(30);
                }
                &-phoneCode{
                    width:rpx(120);
                    border-right: solid 1px $color2;
                }
                &-phone{
                    overflow: hidden;
                    padding-left: rpx(20);
                }
                &-flex{
                    flex: 1;
                }
                &-arr{
                    width: rpx(32);
                    height: rpx(32);
                    transform:rotate(90deg);
                }
            }
            .warning {
                color: $color3;
            }
            &-textarea{
                width: 100%;
                min-height: rpx(120);
            }
        }
    }
    .incomeSubmit{
        padding: rpx(80) rpx(30) rpx(30);
        &-btn{
            display: block;
            width: 100%;
            height: rpx(80);
            line-height: rpx(80);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }

    .channel{
        position: fixed;
        background: rgba(0,0,0,.5);
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        z-index: 999;
        &-flex{
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
        }
        &-main{
            position: relative;
            padding: rpx(30);
            margin: auto;
            background: $color0;
            width: rpx(400);
            &-list{
                margin: auto;
                &-item{
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    padding: rpx(15);
                    font-size: rpx(32);
                    line-height: 100%;
                    height: rpx(32);
                    input{
                        margin-right: rpx(10);
                        border-width: 1px;
                        appearance:normal;
                        -moz-appearance:radio; /* Firefox */
                        -webkit-appearance:radio; /* Safari 和 Chrome */
                    }
                }
            }
        }
    }


</style>